<template>
  <div id="fuck">
    <div class="headert">
      <div class="title_flex">
        <div>
          <img @click="PrevGo" class="Prev" src="../assets/images/app_fh.png" alt />
        </div>
        <div class="tit">扫一扫</div>
      </div>
    </div>
    <div @click="cancelScan"></div>
    <div class="mui-content">
      <div class="scan">
        <div id="bcid">
          <div class="contents"></div>
          <!-- <p class="tip">...载入中...</p> -->
        </div>
        <footer>
          <button @click="startScan" v-show="isShow">点击扫描</button>
          <button @click="cancelScan">取消</button>
        </footer>
      </div>
    </div>
  </div>
</template>

<script  type='text/ecmascript-6'>
// let scan = null;
//点手机虚拟返回键
// document.addEventListener("plusready", function () {
//   // 注册返回按键事件
//   plus.key.addEventListener(
//     "backbutton",
//     function () {
//       // 事件处理
//       scan.close(); //关闭条码识别控件
//       window.history.back();
//     },
//     false
//   );
// });
import { Dialog } from 'vant';
export default {
  data() {
    return {
      scan:null,
      codeUrl: "",
      isShow: true,
      userId: "", //用户id
      tel: "", //手机号
    };
  },
  mounted() {
     this.startScan(); //进入页面就调取扫一扫
      if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.plusReady, false); //false阻止默认事件
    }
  },
   destroyed() {
      window.removeEventListener("popstate", this.plusReady, false); //false阻止默认事件
    },
  created() {
    this.userId = localStorage.getItem("userId");
    this.tel = localStorage.getItem("tel");
    this.startRecognize();
    this.startScan();
  },
  methods: {
    plusReady(){
      this.scan.cancel(); //关闭扫描
      this.scan.close(); //关闭条码识别控件
    },
    code(uuId, userId, tel) {
      var that = this;
      Dialog.confirm({
        title: "提示",
        message: "确定登录安全生产监管系统",
      })
        .then(() => {
          that.axios
            .post(
              `http://183.66.102.101:8015/aqyz/codeState?uuid=${uuId}&userid=${userId}&phone=${tel}&type=1`
            )
            .then((res) => {
              console.log(JSON.stringify(res));
              if (res.data == "timeout") {
                return this.$toast("登录过期");
              }
              that.$router.push("/me");
            })
            .catch((err) => {
              console.log(JSON.stringify(err));
            });
        })
        .catch(() => {
        });
    },
    //创建扫描控件
    startRecognize() {
      let that = this;
      if (!window.plus) return;
      that.isShow = false;
      // 创建条码扫描识别控件
      that.scan = new plus.barcode.Barcode("bcid");
      // 条码识别成功
      that.scan.onmarked = onmarked;
      function onmarked(type, result, file) {
        switch (type) {
          case plus.barcode.QR:
            type = "QR";
            break;
          case plus.barcode.EAN13:
            type = "EAN13";
            break;
          case plus.barcode.EAN8:
            type = "EAN8";
            break;
          default:
            type = "其它" + type;
            break;
        }
        result = result.replace(/\n/g, "");
        that.codeUrl = result; //扫描后返回值
        let uuId = result.split("=");
        console.log(JSON.stringify(uuId));
        console.log(result);
        that.axios
          .post(
            `/updateQrcode?uuid=${uuId[2]}&userid=${that.userId}`
          )
          .then((res) => {
            console.log("77777");
            console.log(JSON.stringify(res));
            if (res.data == "no") {
              return this.$toast("登录失败!");
            }
            that.code(uuId[2], that.userId, that.tel);
            that.scan.cancel(); //关闭扫描
            that.scan.close(); //关闭条码识别控件
            if (that.codeUrl) {
              that.isShow = true;
            }
          })
          .catch((err) => {
            console.log(JSON.stringify(err));
          });
        that.scan.cancel(); //关闭扫描
        that.scan.close(); //关闭条码识别控件
        if (that.codeUrl) {
          that.isShow = true;
        }
      }
    },
    //开始扫描
    startScan() {
      if (!window.plus) return;
      this.startRecognize(); //创建控件
      this.scan.start();
    },
    cancelScan() {
      this.isShow = true;
      this.scan.cancel(); //关闭扫描
      this.scan.close(); //关闭条码识别控件
    },
    PrevGo() {
      this.$router.back();
       this.scan.cancel(); //关闭扫描
       this.scan.close(); //关闭条码识别控件
    },
  },
};
</script>
<style scoped>
.fuck {
  position: fixed;
  width: 100%;
  height: 100%;
}
.headert {
  height: 2.4rem;
  width: 100%;
  background: url("../assets/images/app_bg.png") no-repeat;
  background-size: 100% 100%;
  z-index: 10000;
  position: fixed;
}
.title_flex {
  display: flex;
  align-items: center;
  color: #ffffff;
  text-align: center;
}
.tit {
  width: 100%;
  text-align: center;
  line-height: 2.4rem;
  font-size: 0.4rem;
  margin-top: 0.185185rem;
}
.Prev {
  width: 0.2778rem;
  height: 0.4815rem;
  margin-left: 0.2667rem;
  line-height: 2.4rem;
}
.mui-content {
  padding: 44px 0 60px 0; /*px*/
  box-sizing: border-box;
  /* margin-top: 60px; px */
}
.scan {
  height: 100%;
}
.scan #bcid {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 2.2rem; /*px*/
  bottom: 3rem;
  text-align: center;
  color: #fff;
  background: #ccc;
}
.scan footer {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: 1rem;
  width: 100%;
  z-index: 2;
  display: flex;
  justify-content: center;
}
.scan footer button {
  width: 45%;
  font-size: 30px; /*px*/
}
.clickBtn,
.cancelBtn {
  /* margin-top: 20px; px */
  width: 150px; /*px*/
  height: 60px; /*px*/
  text-align: center;
}
.cancelBtn {
  margin-left: 20px; /*px*/
}
</style>
